<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue3</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div class="static" v-bind:class="{ active:isActive,'text-danger':hasError }" id="app-1"></div>
<div class="static" v-bind:class="{ classobject }" id="app-2">
    <template v-if="true">
        <h1>Title</h1>
        <h1>P1</h1>
        <h1>P2</h1>
    </template>
</div>
<div v-bind:style="{ color:activeColor,fontSize:fontSize +'px'}" id="app-3">
    <h1 v-if="true">Yes</h1>
    <h1 v-else>No</h1>
</div>
<div id="app-4">
    <template v-if="loginType==='username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email">
    </template>
    <button v-on:click="click"/>
</div>
<div id="app-5">
    <ul>
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
</div>
<div id="app-6">
    <ul>
        <li v-for="(value,key,index) in object">
            {{index}}.{{key}}:{{value}}
        </li>

    </ul>
</div>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            object: {
                FirstName: 'John',
                LastName: 'Doe',
                Age: 30
            }
        }

    })
    var app5 = new Vue({
        el: '#app-5',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })
    new Vue({
        el: '#app-4',
        data: {
            loginType: 'username'
        },
        methods: {
            click: function () {
                if (this.loginType === 'username')
                    this.loginType = 'email address'
                else
                    this.loginType = 'username'
            }
        }
    })
    new Vue({
        el: '#app-1',
        data: {
            isActive: true,
            hasError: false
        }
    })
    new Vue({
        el: '#app-2',
        data: {
            isActive: true,
            error: null
        },
        computed: {
            classobject: function () {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal',
                }
            }
        }
    })
    new Vue({
        el: '#app-3',
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })


</script>
</body>
</html>